<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div></div>
    <script>
        window.onload = function(){
            // 移动端单击操作
            // 1. 只有一根手指
            // 2. 判断手指开始触摸和手指松开的事件差异不能大于指定的值 (因为长按也是事件)
            // 3. 保证没有滑动操作 如果有抖动 必须得保证抖动的距离在指定的范围内
            var div =document.querySelector("div");
            var startTime,startX,startY;
            div.addEventListener("touchstart",function(e){
                if (e.targetTouches.length > 1) {
                    return ;
                }
                // 记录手指开始触摸的时间
                startTime = Date.now();
                // 记录当前手指的坐标
                startX = e.targetTouches[0].clientX;
                startY = e.targetTouches[0].clientY;

                // 初始化工作
                
            });
            div.addEventListener("touchend",function(e){
                // 判断是否只有一根手指
                if (e.targetTouches.length > 1) {
                    return ;
                }
                // 判断时间差异
                if(Date.now() - startTime >150){
                    // 长按操作
                    return;
                }
                // 判断松开手指时的坐标与触摸开始时的坐标的距离的差异
                var endX = e.changedTouches[0].clientX;
                var endY = e.changedTouches[0].clientY;
                if(Math.abs(endX - startX)<6&&Math.abs(endY - startY)<6){
                    // 允许抖动  有抖动区间 
                    console.log("移动端的单击事件 tap事件");
                }
            });
        }
    </script>
</body>
</html>